<template>
  <div class="box">
    <div class="item">
      <el-row>
        <el-col :span="4">手机号</el-col>
        <el-col :span="20"
          ><el-input
            v-model="phone"
            placeholder="请输入手机号"
            @blur="changeUserinfo"
          ></el-input
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4">联系邮箱</el-col>
        <el-col :span="20"
          ><el-input
            v-model="email"
            placeholder="请输入联系邮箱"
            @blur="changeUserinfo"
          ></el-input
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4">账户密码</el-col>
        <el-col :span="18"
          ><el-input
            show-password
            v-model="pwd"
            placeholder="请输入密码"
          ></el-input
        ></el-col>
        <el-col :span="2" class="changePwd" @click.native="changePwd"
          >更改</el-col
        >
      </el-row>
      <div class="xiugai" v-if="status">
        <el-row v-if="!iswj">
          <el-col :span="4">原密码</el-col>
          <el-col :span="20"
            ><el-input
              v-model="originpwd"
              placeholder="请输入原始密码"
            ></el-input
          ></el-col>
        </el-row>
        <el-row v-if="iswj">
          <el-col :span="4">验证码</el-col>
          <el-col :span="12"
            ><el-input v-model="code" placeholder="请输入验证码"></el-input
          ></el-col>
          <el-col :span="8">
            <p class="code" @click="getCode">{{getCodeText}}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">新密码</el-col>
          <el-col :span="20"
            ><el-input
              show-password
              v-model="chpwd"
              placeholder="请输入密码"
            ></el-input
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="4">确认密码</el-col>
          <el-col :span="20"
            ><el-input
              show-password
              v-model="chqrpwd"
              placeholder="请输入密码"
            ></el-input
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :offset="8">
            <p class="code" @click="changeInfo">确定更改</p>
          </el-col>
          <el-col :span="3">
            <p class="wangji" @click="iswj = true">忘记密码？</p>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="4">账户注销</el-col>
        <el-col :span="17"
          ><p class="img-tip">
            <i class="iconfont icon-zhushi">账号注销后不可找回 </i>
          </p></el-col
        >
        <el-col :span="3" class="changePwd" @click="cancel">确定注销</el-col>
      </el-row>
    </div>
    <!-- 滑块验证 -->
    <el-dialog
      title="验证"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <slide-verify
        :l="42"
        :r="10"
        :w="350"
        :h="205"
        ref="slideverify"
        @success="onSuccess"
        @fail="onFail"
        slider-text="向右滑动完成验证"
      ></slide-verify>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      phone: "",
      email: "",
      pwd: "",
      originpwd: null, //原密码
      code: null,
      chpwd: null, //改密码输入密码
      chqrpwd: null, //改密码输入确认密码
      status: false,
      iswj: false,
      dialogVisible: false,
      getCodeText:'获取验证码',
      time:60
    };
  },
  methods: {
    changePwd() {
      this.status = !this.status;
      this.iswj = false;
    },
    //关闭弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          //重置图片验证
          this.$refs.slideverify.reset();
        })
        .catch((_) => {});
    },
    //图片验证成功
    async onSuccess() {
      console.log("验证成功");
      //成功后的逻辑代码
      this.$message({
        message: "验证通过",
        type: "success",
      });
      this.dialogVisible = false;
      this.$refs.slideverify.reset();
      //发送验证码
      this.$axios({
        method: "post",
        url: "/user/send",
        data: qs.stringify({ value: this.phone }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        }
      });
    },
    //验证失败
    onFail() {
      this.$message.error("验证失败");
      //失败后的逻辑代码
    },
     //点击获取验证码
    getCode(){
      let t1
      if(this.getCodeText=='获取验证码'){
        this.dialogVisible = true
        t1=setInterval(()=>{
        this.time--;
        this.getCodeText='重新获取（'+this.time+'）';
        //清除定时器
        if(this.time==0){
          this.time=60
        clearInterval(t1)
        this.getCodeText='获取验证码'
      }
        },1000)
      }
     
    },
    //更改密码
    changeInfo() {
      if ((this.code == null && this.originpwd == null) || this.chpwd == null) {
        this.$message.error("不能为空");
        return 0;
      }
      if (this.chpwd != this.chqrpwd) {
        this.$message.error("前后密码不一致");
        return 0;
      }
      if (this.code != null) {
        this.$axios({
          method: "post",
          url: "/user/updatePasswordByCode",
          data: qs.stringify({
            code: this.code,
            newPassword: this.chqrpwd,
            value: this.phone,
          }),
        }).then((res) => {
          console.log(res);
          if (res.code != "200") {
            this.$message.error(res.msg);
          } else {
            this.$message({
              message: "更改成功",
              type: "success",
            });
            this.status = false;
          }
        });
      } else if (this.originpwd != null) {
        this.$axios({
          method: "post",
          url: "/user/updatePassword",
          data: qs.stringify({
            oldPassword: this.originpwd,
            newPassword: this.chqrpwd,
            userId: this.$getStorage("userinfo").id,
          }),
        }).then((res) => {
          console.log(res);
          if (res.code != "200") {
            this.$message.error(res.msg);
          } else {
            this.$message({
              message: "更改成功",
              type: "success",
            });
            this.status = false;
          }
        });
      }
    },
    //更改用户信息
    changeUserinfo() {
      this.$axios({
        method: "post",
        url: "/user/update",
        data: qs.stringify({
          email: this.email,
          phone: this.phone,
          id: this.$getStorage("userinfo").id,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          this.$message({
            message: "更改成功",
            type: "success",
          });
        }
      });
    },
    //注销
    cancel(){
      this.$axios({
        method: "post",
        url: "/user/update",
        data: qs.stringify({
          status:-1,
          id: this.$getStorage("userinfo").id,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          this.$message({
            message: "注销成功",
            type: "success",
          });
          this.$removeStorage('userinfo');
          this.$removeStorage('isLogin');
          this.$removeStorage('token');

        }
      });
    }
  },
  mounted() {
    let userinfo = this.$getStorage("userinfo");
    console.log(userinfo);
    this.phone = userinfo.phone;
    this.email = userinfo.email;
    this.pwd = userinfo.password;
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  background-color: #f2f7fb;
  .code {
    background-color: #312a6d;
    height: 40px;
    color: white;
    font-size: 16px;
    // line-height: 40px;
    border-radius: 5px;
    margin-left: 10px;
  }
  .wangji {
    font-size: 14px;
    color: #999;
    text-align: right;
    margin-top: 10px;
    user-select: none;
  }
  .item {
    overflow: hidden;

    background-color: white;
    margin: 35px 0;
    padding: 30px 50px;
    box-sizing: border-box;
    box-shadow: 0 0 8px 5px rgba(228, 228, 228, 0.5);
    border-radius: 10px;
    & > div {
      margin: 30px 0;
      line-height: 40px;
      .changePwd {
        color: #1890ff !important;
        user-select: none;
      }

      .left {
        text-align: left;
      }
      .img-tip {
        color: #999;
        margin-bottom: 20px;
        text-align: left;
      }
    }
    .xiugai {
      margin: 20px 40px;
      border: 1px dashed #d9d9d9 !important;
      padding: 20px;
      border-radius: 10px;
      & > div {
        margin: 30px 0;
        line-height: 40px;
      }
    }
  }
}
</style>